<route>
    {
        meta: {
            title: "编辑成员"
        }
    }
</route>

<script setup name="personalExampleUser">
import useFileStore from '@/store/modules/file'
import useUserGroupStore from '@/store/modules/userGroup'

const route = useRoute()
const router = useRouter()

const fileStore = useFileStore()
const groupStore = useUserGroupStore()

const treeList = ref([])
const checked = ref([])
const treeRef = ref([])

const defaultProps = ref({
  children: 'children',
  label: 'name'
})

onMounted(() => {
  groupStore.getGroupTree().then(res => {
    treeList.value = res
    fileStore.permmissonGroupsFileId(route.query.id).then(res => {
      checked.value = res
    })
  })
})

function onSubmit() {
  let arr = treeRef.value.getCheckedKeys()
  fileStore.permmissonGroupsPutUser(route.query.id, arr).then(res => {
    ElMessage({
      type: 'success',
      message: '修改成功'
    })
    router.push({
        name: 'personalExamplePowerIndex'
    })
  })
}

</script>

<template>
  <div>
    <page-header title="编辑成员"></page-header>
    <page-main>
      <el-row>
        <el-col :md="24" :lg="12">
          <el-card class="box-card">
            <div class="clearfix" slot="header">
              <div class="card-title">文件权限组</div>
            </div>
            <el-tree
            :data="treeList"
            show-checkbox
            ref="treeRef"
            node-key="userId"
            default-expand-all
            :props="defaultProps"
            :default-checked-keys="checked"></el-tree>
          </el-card>
        </el-col>
      </el-row>
    </page-main>
    <fixed-action-bar>
      <el-button type="primary" size="large" @click="onSubmit">提交</el-button>
    </fixed-action-bar>
  </div>
</template>

<style scoped>
.card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}
</style>